<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Flexbox Examples</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Flexbox Examples</h1>
    <p>These examples are to accompany the Flexbox articles on MDN.</p>

    <h2>Basic concepts of flexbox</h2>

    <ol>
      <li><a href="basics/the-flex-container.html">The flex container</a></li>
      <li><a href="basics/flex-direction.html">The flex-direction property</a></li>
      <li><a href="basics/flex-wrap.html">Multi-line flex containers</a></li>
      <li><a href="basics/flex-flow.html">The flex-flow shorthand</a></li>
      <li><a href="basics/flex-properties.html">The flex properties</a></li>
      <li><a href="basics/flex-shorthands.html">Flex shorthands</a></li>
      <li><a href="basics/align-items.html">Align items</a></li>
      <li><a href="basics/justify-content.html">Justify content</a></li>
    </ol>

    <h2>Relationship to other layout methods</h2>
    
        <ol>
          <li><a href="relationship/writing-modes.html">Writing Modes</a></li>
          <li><a href="relationship/floats.html">Floated layout</a></li>
          <li><a href="relationship/flex-layout.html">Simple flex layout</a></li>
          <li><a href="relationship/grid-layout.html">Simple grid layout</a></li>
          <li><a href="relationship/display-contents.html">Demo of display: contents</a></li>
        </ol>

    <h2>Alignment</h2>

    <ol>
      <li><a href="alignment/intro.html">Centering a box</a></li>
      <li><a href="alignment/align-items.html">Alignment on the cross axis with align-items</a></li>
      <li><a href="alignment/align-self.html">Aligning individual items with align-self</a></li>
      <li><a href="alignment/align-self-column.html">Changing the main axis to column and aligning items</a></li>
      <li><a href="alignment/align-content.html">Aligning content on the cross axis</a></li>
      <li><a href="alignment/align-content-column.html">Changing the main axis to column</a></li>
      <li><a href="alignment/justify-content.html">Main axis alignment with justify-content</a></li>
      <li><a href="alignment/justify-content-column.html">Main axis alignment with flex-direction column</a></li>
      <li><a href="alignment/justify-content-writing-mode.html">Main axis alignment in RTL writing mode</a></li>
      <li><a href="alignment/justify-content-reverse.html">Main axis alignment with reversed row</a></li>
      <li><a href="alignment/auto-margins.html">Alignment with auto margins</a></li>
    </ol>

    <h2>Order</h2>

    <ol>
      <li><a href="order/flex-direction.html">The flex-direction property</a></li>
      <li><a href="order/order.html">The order property</a></li>
      <li><a href="order/negative-order.html">Using negative values for order</a></li>
      <li><a href="order/usecase-order.html">A usecase for the order property</a></li>
    </ol>

    <h2>Ratios on the main axis</h2>
    <ol>
      <li><a href="ratios/min-max-content.html">Concepts of min and max-content</a></li>
      <li><a href="ratios/flex-basis.html">The flex-basis property</a></li>
      <li><a href="ratios/flex-grow.html">The flex-grow property</a></li>
      <li><a href="ratios/flex-grow-ratios.html">Ratios and the flex-grow property</a></li>
      <li><a href="ratios/flex-shrink.html">The flex-shrink property</a></li>
      <li><a href="ratios/flex-shrink-min-content.html">min-content sizing and the flex-shrink property</a></li>
      <li><a href="ratios/flex-shrink-ratios.html">Ratios and the flex-shrink property</a></li>
    </ol>

    <h2>Mastering wrapping of flex items</h2>
    <ol>
      <li><a href="wrapping/row-wrap.html">Wrapping when flex-direction is row</a></li>
      <li><a href="wrapping/column-wrap.html">Wrapping when flex-direction is column</a></li>
      <li><a href="wrapping/row-reverse-wrap.html">Wrapping when flex-direction is row-reverse</a></li>
      <li><a href="wrapping/grid-example.html">Grid and two-dimensions</a></li>
      <li><a href="wrapping/flex-grid.html">A flexbox grid</a></li>
      <li><a href="wrapping/gaps.html">Gaps between flex items</a></li>
      <li><a href="wrapping/visibility-collapse.html">Setting an item to visibility: collapse</a></li>
      <li><a href="wrapping/wrapped-visibility-collapse.html">Wrapped items with visibility: collapse</a></li>
    </ol>

    <h2>Common Use Cases of Flexbox</h2>
    <ol>
      <li><a href="use-cases/navigation.html">Navigation</a></li>
      <li><a href="use-cases/navigation-flex.html">Navigation distributing space to items</a></li>
      <li><a href="use-cases/navigation-split.html">Split navigation</a></li>
      <li><a href="use-cases/center.html">Centering an item</a></li>
      <li><a href="use-cases/cards.html">Card layout</a></li>
      <li><a href="use-cases/media.html">Media object</a></li>
      <li><a href="use-cases/media-flipped.html">Flipped media object</a></li>
      <li><a href="use-cases/input-button.html">Input element and button</a></li>
      <li><a href="use-cases/label-input-button.html">Adding a label to the input and button</a></li>
    </ol>

    <h2>Backwards compatibility of flexbox</h2>
    <ol>
      <li><a href="browsers/float.html">With floats as a fallback</a></li>
      <li><a href="browsers/inline-block.html">With inline-block as a fallback</a></li>
      <li><a href="browsers/table-cell.html">With table-cell as a fallback</a></li>
      <li><a href="browsers/vertical-align.html">With the vertical-align property as a fallback for alignment</a></li>
    </ol>
  </body>
</html>